<template>
    <div class="city">
        <CityHeader></CityHeader>   
        <List :hot="hotCity" :letter="letter" :list="cities"></List>
        <Alphabet @chang="handleLetterChang" :list="cities"></Alphabet>
    </div>
</template>
<script>
import axios from 'axios'
import CityHeader from './commonComponents/city/Header'
import List from './commonComponents/city/List'
import Alphabet from './commonComponents/city/Alphabet'
export default {
    data () {
        return {
            cities:[], // 城市列表
            hotCity:[], //热门城市
            letter: ''  // A-Z
        }
    },
    components: {
        CityHeader,
        List,
        Alphabet
    },
    methods:{
        getCityInfo () {
            axios.get('/static/city.json').then(this.getCityInfoSucc)
        },
        getCityInfoSucc(res){
             this.cities = res.data.city
        },
        handleLetterChang(letter) { //接受子组件传过来的
            console.log(letter)
            this.letter = letter
        }
    },
    mounted () {
        this.getCityInfo ()
    }
}
</script>